<template>
	<view class="help-list">
		<!-- <view class="back">
			<view class="back-circle" @click="back()">
				<text class="iconfont icon-left"></text>
			</view>
		</view> -->
		<view class="map-list">
			<map class="map-info" :latitude="latitude" :longitude="longitude" :markers="markers"
			:scale="14" controls show-location></map>
		</view>
		<!--搜索-->
		<view style="padding: 0;" v-if="poiType == '3'">
			<searchbar :placeholder="'请输入关键字'" @confirm="onSearchConfirm()"></searchbar>
		</view>
		<view class="poi-list">
			<block v-for="(item,index) in poiList" :key="index">
				<view class="poi-info">
					<!-- <view class="poi-img">
						<image :src="item.listImage"></image>
					</view> -->
					<view class="poi-msg">
						<view class="title" v-if="poiType != '3' && poiType != '4'">
							<text>{{item.name}}</text>
						</view>
						<view class="title" v-if="poiType == '3' || poiType == '4'">
							<text>{{item.title}}</text>
						</view>
						<view class="address" v-if="item.businesstime">
							<text>营业时间：{{item.businesstime}}</text>
						</view>
						<view class="address" v-if="poiType == '2'">
							<text>所在地：{{item.city}}</text>
						</view>
						<view class="address" v-if="poiType == '3' || poiType == '4'">
							<text>所在地：{{item.address}}</text>
						</view>
						<!-- <view class="phone">
							<text>{{item.phone}}</text>
						</view> -->
					</view>
					<!-- <view class="phone-call" @click="phoneCall(item)">
						<view class="phone-circle">
							<text class="iconfont icon-phone-fill"></text>
						</view>
					</view> -->
				</view>
				<view class="br"></view>
			</block>
			
		</view>
		<view style="text-align: center;">
			<wxc-flex v-if = 'isNoMore && poiList.length > 0' dir='left' main='center' cross='center' style='width:100%;'>
					<vline color='#DDDDDD' width='120upx' height='1px'></vline>
					<text class='font-r' style='font-size:24upx;color:#464646;margin-left:26upx;margin-right:26upx;'>没有更多数据啦</text>
					<vline color='#DDDDDD' width='120upx' height='1px'></vline>
			</wxc-flex>
		</view>
	</view>
</template>

<script>
	import amap from '@/common/js/amap-wx.js'
	import sunTab from '@/components/sun-tab/sun-tab.vue'
	import searchbar from "@/components/search-bar.vue"
	var currentPage = 1
	export default {
		components:{
			sunTab,
			searchbar
		},
		data() {
			return {
				poiTypeId:'',
				index: 0,
				//高德key
				key:'b56e180ab79c37ab0452a550917e74fc',
				latitude: "",
				amap:'',
				longitude:"" ,
				markers:[
					
				],
				address:'',
				url:'',
				poiType:'',
				isSearch:false,
				tabList:[],
				poiList:[],
				isEmpty: false,
				isNoMore: false
			};
		},
		onLoad:function(option){
			console.log(option)
			this.poiType = option.type
			uni.setNavigationBarTitle({
				title: option.type == '1' ? '代售点信息':option.type == '2'? '客运站信息':option.type == '3'? '汽车充电站':'共享汽车租赁'
			})
			this.amap = new amap.AMapWX({
				key:this.key
			})
			switch(option.type){
				case '1':
					this.url = this.$path.COMISSION_LIST
				break;
				case '2':
					this.url = this.$path.STATION_LIST
				break;
				case '3':
					this.url = this.$path.GET_POI_LIST
				break;
				case '4':
					this.url = this.$path.GET_POI_LIST
				break;				
			}
			// this.url = option.type == '1' ? this.$path.COMISSION_LIST : this.$path.STATION_LIST
			
			this.getLocation()
			// this.getPOIType()
		},
		onReachBottom: function() {
			if (!this.isNoMore && !this.isSearch) {
				this.getPOIList();
			}
		},
		methods:{
			back:function(){
				uni.navigateBack({
				
				})
			},
			onSearchConfirm: function(e) {
				this.poiList = []
				console.log(e)
				this.keyword = e.detail.value
				currentPage = 1;
				this.isNoMore = false;
				this.isSearch = e.detail.value ? true : false;
				this.getPOIList(this.keyword)
			},
			//拨打电话
			phoneCall:function(item){
				console.log(item)
				let obj = item 
				let number = obj.phone.toString().replace('-','')
				console.log("号码：",number)
				uni.makePhoneCall({
					phoneNumber:number
				})
// 				uni.showModal({
// 					title: '提示',
// 					content: '拨打' + obj.phone,
// 					success: res=>{
// 
// 					}
// 				})
			},
			tabChange:function(e){
				console.log(e)
				let item = e.tab
				this.poiType = item.id
				this.getPOIList()
			},
			getLocation:function(){
		
				this.amap.getRegeo({
					success:data=>{
						console.log("高德返回--------->",data[0])
						let result = data[0]
						this.latitude = result.latitude
						this.longitude = result.longitude
						
						this.address = result.regeocodeData
						console.log("地址信息----------->",this.address)
						this.getPOIList()
					}
				})

				
			},
			//获取周边poi列表
			getPOIList:function(keyword){
				this.markers = []
				
				let params = {
					pageIndex:'1',
					pageSize: this.isSearch?'100':'10',
					name:keyword || ''
				}
				//汽车充电站
				if(this.poiType == '3'){
					params.poiTypeId = '300002301'
				}else if(this.poiType == '4'){
					//共享汽车租赁
					params.poiTypeId = '300002401'
				}
				this.$postApi(this.url,params).then(res => {
					console.log("列表返回数据------------->",res.data)
					//处理poi列表中经纬度集合绑定至地图
					let list = res.data.data.list
				
					if (currentPage == 1) {
							var content = list;
						} else {
							var content = this.poiList.concat(list);
						}
						
						// console.log("景区列表----------->",that.scences);
						var isNoMore = false;
						var isEmpty = false;
						if (content.length == 0) {
							isEmpty = true;
						} else if (!res.data.data.hasNextPage) {
							//已经无再多数据
							isNoMore = true;
						}
					
						currentPage++;
						this.isEmpty = isEmpty;
						this.isNoMore = isNoMore;
					
						this.poiList = content;
						console.log("that.scences------------->",this.poiList);
				})
			},
		}
	}
</script>

<style lang="scss">
	.br{
		width: 100%;
		height: 2upx;
		background: #f7f7f7;
	}
	.help-list{
		min-height: 100%;
		font-size: 32upx;
		background: #F2F2F2;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.search{
		background: transparent  !important;
	}
	.cu-bar .search-form{
		background: #fff;
		color: #b3b3b3;
		font-size: 28upx;
		// font-weight: 500;
	}
	.back{
		position: fixed;
		top:65upx;
		left: 25upx;
		z-index:99999;
		.back-circle{
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background: #fff;
			width: 60upx;
			height: 60upx;
		}
	}
	.map-info{
		width: 100%;
		height: 600upx;
	}
	.poi-list{
		padding: 20upx;
		// background: #fff;
	}
	.poi-info{
		height: 182upx;
		display: flex;
		border-radius: 12upx;
		background: #fff;
		padding: 24upx;
		margin-bottom: 20upx;
		.poi-img{
			width: 35%;
			padding: 30upx;
		}
		.poi-msg{

			padding: 20upx 0;
			flex-direction: column;
			justify-content: space-around;
			display:flex;
			line-height: 34upx;
			.title{
				font-size: 40upx;
				font-weight: bold;
				
				text{
					
				}
			}
			.address{
				font-size: 24upx;
				color: #666;
				margin-top: 26upx;
			
			}
			.phone{
				font-size: 24upx;
				color: #666;
			}
			
		}
		.phone-call{
			display: flex;
			justify-content: center;
			align-items: center;
			
			.phone-circle{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60upx;
				height: 60upx;
				border-radius: 50%;
				border: 1upx solid #0092FF;
				
				text{
					font-size: 36upx;
					color: #0092FF;
				}
			}
		}
	}
</style>